<template>
  <div>
    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="106">
      </el-table-column>
      <el-table-column
        min-width="106"
        prop="roleName"
        label="版本名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        min-width="146"
        align="center"
        label="拥有功能">
        <template slot-scope="scope">
              <label v-if="scope.row.available === '1'" for="">正常</label>
              <label v-if="scope.row.available === '0'" for="">禁用</label>
             </template>
      </el-table-column>
      <el-table-column
        align="center"
        min-width="370"
        label="操作">
         <template slot-scope="scope">
                <el-button
                  size="mini"
                  :disabled="scope.row.roleId === 1"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  :disabled="scope.row.roleId === 1"
                  @click="handleConfig(scope.$index, scope.row)">配置</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  :disabled="scope.row.roleId === 1"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
      </el-table-column>
    </el-table>
    <div class="pagetbnBox">
      <div class="lipagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
            :page-size="10"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="total" hide-on-single-page>
          </el-pagination>
      </div>
    </div>
    <!--  弹框 编辑-->
    <div class="newadddcmd" id="newAddCoryRightWrapper">
      <el-dialog id="addRole" title="添加角色" top="250px"  custom-class="newAddCoryRightWrapper" :visible.sync="editShow">
        <el-form label-position="left" :model="editForm">
          <el-form-item label="角色名称" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model="editForm.roleName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色状态" label-width="80px">
            <el-select style="width: 86%;" v-model="editForm.available" placeholder="请选择角色状态">
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancleBtn" @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="handEditSure">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from 'request'
export default {
  name: 'roleTable',
  props: {
    total: '',
    tableData: {
      type: Array
    }
  },
  data () {
    return {
      currentPage: '',
      editShow: false,
      editForm: {
        roleName: '',
        roleId: '',
        available: ''
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$parent.init(this.currentPage)
    },
    handleSizeChange (val) {
    },
    handleEdit (index, row) {
      this.editShow = true
      this.editForm.roleId = row.roleId
      this.editForm.roleName = row.roleName
      this.editForm.available = row.available
    },
    handEditSure () {
      if (!this.editForm.available) {
        this.$message.error('请输角色名称')
        return
      } else if (!this.editForm.roleName) {
        this.$message.error('请输角色状态')
        return
      }
      request.editRole({
        available: this.editForm.available,
        roleId: this.editForm.roleId,
        roleName: this.editForm.roleName
      }).then(res => {
        if (res) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$parent.init(this.currentPage)
          }, 500)
        }
      }).catch(res => {
        this.$message.error('编辑失败')
      })
      this.editShow = false
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.deteRole(row.roleId).then(res => {
          if (res) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            if (index === 0) {
              this.currentPage--
            }
            setTimeout(() => {
              this.$parent.init(this.currentPage)
            }, 500)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleConfig (index, row) {
      this.$router.push({
        name: 'menuConfig',
        params: {
          index: index,
          row: row
        }
      })
    }
  },
  created () {
    this.currentPage = Number(localStorage.getItem('roleManageCurrentPage')) || 1
    this.$parent.init(this.currentPage)
  },
  beforeUpdate () {
    localStorage.setItem('roleManageCurrentPage', this.currentPage)
  }
}
</script>

<style lang="stylus" scoped>
.block{
  float right
  padding 20px 0 0 0
}
</style>
